<template>
  <div class="zy-content">
    <back-level :go-page="close"></back-level>
    <Form ref="acceptCheckForm" :model="formItem" label-position="top">
      <Card :title="$t('preliminary.BasicInformation')" class="detail-content-layout">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ContractNumber')}`">
                  <div class="basic-info-body-item">{{ formItem.contractNo }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('maintenance.EquipmentName')}`">
                  <div class="basic-info-body-item">{{ formItem.deviceName }}</div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Entity')}`">
                  <div class="basic-info-body-item">{{ formItem.belongCompanyName }}</div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-top: 1px solid #eee;">
              <Col span="8" style="border-bottom: 1px solid #eee;">
                <FormItem :label="`${$t('preliminary.Vendor')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.supplier }}
                  </div>
                </FormItem>
              </Col>
            </Row>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.confirmInformation')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row style="border-top: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Department')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.useDept }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Location')}`">
                  <Cascader
                      :data="orgList"
                      v-model="formItem.orgId"
                      :transfer="true"
                      disabled
                  ></Cascader>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.Manufacturer')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.manufacturer }}
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-top: 1px solid #eee">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ConfirmingDate')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.arrivalAcceptDate }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ManufacturingDate')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.produceDate }}
                  </div>
                </FormItem>

              </Col>
              <Col span="8">
                <FormItem :label="`${$t('equipCheck.Model')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.specification }}
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee;">
              <Col span="8">
                <FormItem :label="`${$t('preliminary.ManufacturingNumber')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.factoryNo }}
                  </div>
                </FormItem>
              </Col>

              <Col span="8">
                <FormItem :label="`${$t('ledger.Voltage')}（V）`">
                  <div class="basic-info-body-item">
                    {{ formItem.voltage }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem :label="`${$t('ledger.EquipmentPower')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.ratedPower }}
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="8" style="border-bottom: 1px solid #eee;">
                <FormItem :label="`${$t('ledger.EquipmentWeight')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.weight }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8" style="border-bottom: 1px solid #eee;">
                <FormItem :label="`${$t('ledger.AssetNo')}`">
                  <div class="basic-info-body-item">
                    {{ formItem.assetsNo }}
                  </div>
                </FormItem>
              </Col>
            </Row>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.Confirm')" class="detail-content-layout mt16">
        <div class="basic-info">
          <div class="basic-info-body">
            <Row>
              <Col span="8" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('preliminary.ConfimedBy')}`" required>
                  <div class="basic-info-body-item">
                    {{ formItem.arrivalAcceptName }}
                  </div>
                </FormItem>
              </Col>
              <Col span="8" style="border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('preliminary.confirmationResults')}`" required>
                  <RadioGroup v-model="formItem.arrivalResult">
                    <Radio v-for="equ in packages"
                           :key="equ.id"
                           :label="equ.id"
                           disabled>
                      {{ equ.value }}
                    </Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
              <Col span="8" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                <FormItem :label="`${$t('preliminary.InformationPackage')}`">
                  <div class="basic-info-body-item">
                    <div class="file-list"
                         style="display: flex;justify-content: flex-start;align-items: center"
                         v-for="(item, index) in formItem.technicalDocumentList" :key="index">
                      <Tag color="blue"
                           type="border"
                           class="item-src"
                           @click.native="handlePreview(item)">
                        {{ item.fileName }}
                      </Tag>
                    </div>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row>
            </Row>
          </div>
        </div>
      </Card>
      <Card :title="$t('preliminary.ConfirmRecord')" class="detail-content-layout mt16">
        <div class="basic-info">

          <div class="basic-info-body">
            <Table :columns="columns" :data="dataSource">
              <template slot-scope="{ row }" slot="dwys">
                <Tag color="blue" type="border"
                     v-for="(item, index) in row.technicalDocumentList"
                     :key="index"
                     class="dwFileUrl"
                     @click.native="handlePreview(item)">
                  {{ item.fileName }}
                </Tag>
              </template>
            </Table>
          </div>
        </div>
      </Card>
    </Form>
  </div>
</template>

<script>
import { findOrgByToken } from '@/api/index.js';
import recursion from "@/util/recursion";

export default {
    name: "detailAcceptanceCheckModal",
    data() {
        return {
            result: '',
            formItem: {},
            packages: [
                {id: 1, value: this.$t('preliminary.PassThrough')},
                {id: 0, value: this.$t('preliminary.Unaccepted')}
            ],
            jiList: [],
            columns: [
                {
                    title: `${this.$t('maintenance.ConfirmedTime')}`,
                    key: 'createTime',
                    align: 'center',
                },
                {
                    title: `${this.$t('maintenance.ConfirmedBy')}`,
                    key: 'createName',
                    align: 'center',
                },
                {
                    // title: `${ this.$t('preliminary.AcceptanceTestResult') }`,
                    title: `${this.$t('preliminary.AcceptanceTestResult')}`,
                    key: 'arrivalResult',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.AcceptanceTestInterpretation')}`,
                    key: 'arrivalDesc',
                    align: 'center',
                },
                {
                    title: `${this.$t('preliminary.Acceptancedata')}`,
                    key: 'menge',
                    align: 'center',
                    slot: 'dwys'
                }
            ],
            dataSource: [],
            aList: [],//包装图片列表
            pList: [],//外包装图片列表
            deviceList: [],//设备类别
            orgList: [],//功能位置
            lineId: '',
            arrLine: [],
            coneData: []
        }
    },
    created() {
        let query = this.$route.query;

        console.log(this.$route.query);
        this.result = query.arrivalResult;

        if (Number(query.arrivalStatus) === 0) {
            this.formItem.arrivalResult = null;
        }

        this.id = query.id;

        this.getOrgList();
    },
    methods: {
        close (){
            this.$router.go(-1)
        },
        //文件删除
        delFileList(id, type) {
            if (type == 1) {
                this.formItem.fhqdList = this.formItem.fhqdList.filter((item, index) => index != id)
            } else if (type == 2) {
                this.formItem.technicalDocumentList = this.formItem.technicalDocumentList.filter((item, index) => index != id)
            } else if (type == 4) {
                this.pList = this.pList.filter((item, index) => index != id)
            } else {
                this.aList = this.aList.filter((item, index) => index != id)
            }
        },
        getOrgList() {
            let params = {
                level: 3
            }
            findOrgByToken(params).then(res => {
                if (res.code === 200) {
                    const obj = {
                        label: 'name',
                        value: 'id',
                        children: 'children'
                    }
                    this.orgList = recursion.convertTree(res.data, obj)
                    this.coneData = res.data

                    this.getDetail();
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        show(record) {

        },
        filterData(arr, id) {
            let temp = [];
            let callback = function (nowArr, id) {
                for (let item of nowArr) {
                    if (item.id === id) {
                        temp.unshift(item.id);
                        callback(arr, item.parentId)
                        break;
                    } else {
                        if (item.children && item.children.length) {
                            callback(item.children, id);
                        }
                    }
                }
            };
            callback(arr, id)
            return temp
        },
        getDetail() {
            this.axios({
                method: 'post',
                url: '/dms/dmsArrivalCheck/getArrivalCheckViewData',
                params: {
                    dmsDeviceId: this.id
                }
            }).then(res => {
                if (res.code == 200) {
                    this.formItem.orgId = []
                    this.$nextTick(() => {
                        this.formItem = res.data[0]
                        if (res.data[0].orgId) {
                            const arr = this.filterData(this.coneData, res.data[0].orgId)
                            this.formItem.orgId = [...arr]
                        }
                        this.dataSource = res.data[0].dmsArrivalCheckList
                        this.dataSource.forEach(val => {
                            switch (val.arrivalResult) {
                                case 0:
                                    val.arrivalResult = this.$t('preliminary.Unaccepted')
                                    break;
                                case 1:
                                    val.arrivalResult = this.$t('preliminary.PassThrough')
                            }
                        })
                        // this.aList = res.data.sbwgList
                        // this.pList = res.data.wbzList
                        console.log(this.dataSource)
                    })
                }
            })
        },
        afterDetail(record) {
            this.axios({
                method: 'get',
                url: '/dms/dmsDevice/getDwys',
                params: {
                    deviceMId: record.deviceMId
                }
            }).then(res => {
                
                if (res.code == 200) {
                    this.$nextTick(() => {
                        this.formItem = res.data
                        this.dataSource = res.data.arrivalCheck
                        // this.aList = res.data.sbwgList
                        // this.pList = res.data.wbzList
                        // console.log(this.dataSource)
                    })
                }
            })
        },
        //文件预览
        handlePreview(item) {
            if (item) {
                window.open(this.util.filePathToUrl(item.filePath));
            }
        },
        handleVisibleChange() {

        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .ivu-radio-wrapper {
    margin: 0 !important;
}

.basic-info {
    .basic-info-title {
        span {
            display: inline-block;
            width: 7px;
            height: 24px;
            background: #187bdb;
        }

        h2 {
            display: inline-block;
            font-size: 16px;
            padding-left: 10px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
        }
    }

    .basic-info-body {
        margin: 10px;
        color: #333;
        font-size: 13px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        border-left: 1px solid #eee;

        .basic-info-body-label {
            display: inline-block;
            width: 40%;
            height: 48px;
            line-height: 48px;
            background: #f5f6f7;
            text-align: right;
            padding-right: 10px;
            /*border-left: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }

        .basic-info-body-item {
            /*display: inline-block;*/
            /*width: 60%;*/
            /*height: 48px;*/
            /*line-height: 48px;*/
            /*text-align: left;*/
            // padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            /*border-left: 1px solid #eee;*/
            /*border-right: 1px solid #eee;*/
            /*border-right: 1px solid #B6B7B7;*/
            /*border-top: 1px solid #B6B7B7;*/
            /*border-bottom: 1px solid #B6B7B7;*/
        }
    }
}

.preview {
    position: absolute;
    right: 10px;
    top: 0;
    width: 35px;
    height: 35px;
    background: #eee;

    .preview-img {
        width: 35px;
        height: 35px;
        overflow: hidden;
    }
}

::v-deep .ivu-form-item-content {
    margin-bottom: 0;
    padding: 0 10px;
    height: 48px;
    display: flex;
    align-items: center;
}

::v-deep .ivu-form-item-label {
    margin-bottom: 0;
    padding: 0 10px;
    background: #f5f6f7;
    height: 48px;
    text-align: left;
    width: 100%;
    border-right: 1px solid #eee;
    display: flex;
    align-items: center;
}

::v-deep .ivu-form-item {
    // display: flex;
    align-items: center;
    margin-bottom: 0;
    border-right: 1px solid #eee;
}

::v-deep .Input-wrapper {
    width: 90%;
    margin: 0 10px;

    .ivu-select-selection {
        height: 30px;
        border: none;
        box-shadow: none;
    }

    .ivu-input {
        border: none;
        box-shadow: none;
    }
}

.btn-wrapper {
    position: relative;

    .btn-action {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 100px;
    }
}

.upload-wrapper {
    display: inline-block;
    position: relative;

    span {
        display: inline-block;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: -8px;
        line-height: 26px;
    }

    .upload-action {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        bottom: 0px;
        background: rgba(0, 0, 0, .6);

        i {
            cursor: pointer;
            margin: 0 10px;
        }
    }

    &:hover {
        .upload-action {
            display: inline-block;
        }
    }
}

::v-deep .ivu-upload {
    margin-bottom: -14px;
    display: inline-block;
}

.over-wrapper {
    width: 200px;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .ivu-select-selected-value {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-input-disabled {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-select-placeholder {
    background: #ffffff;
    color: #333333;
}

::v-deep .ivu-select-input {
    background: #fff;
    height: 30px;
}

::v-deep .ivu-cascader .ivu-input {
    border: 0;
    box-shadow: none;
}

.file-list {
    width: 90%;
    margin: 0 20px;

    .item-src {
        display: inline-block;
        line-height: 26px;
        color: #187bdb;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-icon {
        width: 20%;
        display: inline-block;
        margin-top: 4px;
    }
}

.dwFileUrl {
    color: #187bdb;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
